<template>
    <div id='dwjfljqk'>
        <div class="rfdwList_box table">
            <div class='reportFormHeader'>
                <el-col :span='3'>
                    <div class='search'>
                        <el-select
                                class="noBg border1 selectYear"
                                style="width: 440px;"
                                v-model="year"
                                placeholder="请选择" @change="getTable">
                            <el-option
                                    v-for="(option, index) in yearArr"
                                    :key="index"
                                    :label="option"
                                    :value="option"
                            ></el-option>
                        </el-select>
                        <!-- <div class="ml20">
                            <el-button class="btnDefault ">搜索</el-button>
                        </div> -->

                    </div>
                </el-col>
                <el-col :span='18'>
                    <div class='tableTitle'>重要经济目标数量综合统计表</div>
                </el-col>
                <el-col :span="3">
                    <div class="rightSpace flexEnd">
                        <el-button class="btnDefault" @click="exportZyjjmb">导出</el-button>
                    </div>
                </el-col>
            </div>
            <el-table
                    class="bbtable"
                    :data='sliceData'
                    border
                    styel='width: 100%;height: 500px'>
                <el-table-column
                        v-for="(item,index) in tableHeader"
                        :key=index
                        :label="item.value"
                        :prop="item.index">
                    <el-table-column
                            v-for="(item,index) in item.chartModel"
                            :key=index
                            :label="item.value"
                            :prop="item.index">
                        <el-table-column
                                v-for="(item,index) in item.chartModel"
                                :key=index
                                :label="item.value"
                                :prop="item.index">
                            <el-table-column
                                    v-for="(item,index) in item.chartModel"
                                    :key=index
                                    :label="item.value"
                                    :prop="item.index">
                            </el-table-column>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="page">
                <pages :page="page" @changePage="changePage"></pages>
            </div>
        </div>

    </div>
</template>

<script>
  import pages from "../base/pages";
import {baseServe} from "../../request/api";
  export default {
    name: "dwjfljqk",
    data() {
      return{
        page: {
          //总条数
          total: 30,
          //每页条数
          limit: 15,
          //当前页数
          currentPage: 1,
          pageSizes: [5,10,15],
          //实际返回的条数
          dataLength: 7
        },
        year: new Date().getFullYear(),
        yearArr: [
          2019,
          2018,
          2017,
          2016,
        ],
        sliceData: [],
        tableHeader: [],
        tableData: [],
        json_fields: {
          "Complete name": "name",    //常规字段
          Telephone: "phone.mobile", //支持嵌套属性
          "Telephone 2": {
            field: "phone.landline",
            //自定义回调函数
            callback: value => {
              return `Landline Phone - ${value}`;
            }
          }
        },
      }
    },
    mounted() {
      this.getYearArr()
      this.getTable()
    },
    methods: {
      //导出重要jjmb
      exportZyjjmb(){
        this.$store.state.loadingFlag=true
        baseServe.exportzyjjmb({  rfdwnm: localStorage.getItem("rfdwnm"),year:this.year}).then(()=>{
          window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zyjjmb/count?rfdwnm=${localStorage.getItem("rfdwnm")}&year=${this.year}`)
          this.$store.state.loadingFlag=false
        })
      },
      getYearArr(){
       this.$store.state.loadingFlag = true;
        this.yearArr=[]
        let year=new Date().getFullYear()
        for(let i=0;i<10 ;i++){
          this.yearArr.push(year-i)
        }
      },
     async getTable() {
       this.$store.state.loadingFlag = true;
       this.$store.state.bbyear=this.year
       this.tableHeader = [];
       this.tableData=[];
        let data=await baseServe.getTableBy({year:this.year,rfdwnm:localStorage.getItem('rfdwnm')}).then( res =>{
          this.tableData = res.data.datas;
          this.tableHeader=res.data.heads;
            if(res.data.result.resultCode == '000000'){
                this.$store.state.loadingFlag = false;
            }
        })
       this.page.total = this.tableData.length;
       this.page.currentPage=1
       this.pages();
      },
      changePage(data) {
        this.page = data;
        this.pages();
        // this.userList1();
      },
      pages() {
        this.page.total = this.tableData.length;

        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
      },
    },

    components: {
      pages,
    }
  }
</script>

<style lang='less'>
    @import "../../assets/css/global.css";
    .bbtable {
        height: 610px;
        overflow-y: auto;
            &::-webkit-scrollbar {
                width: 4px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(5, 230, 230, 0.6);
                border-radius: 30px;
            }
        }
</style>
